import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {Image, Text, View} from '@tarojs/components'
import {CityLocation} from '../../../utils/server.interface'
import {RESOURCE_URL, VIP_LOG} from '../../../constants/api'
import {vcmonitor} from "../../../utils/tools";
import {newHttp} from "../../../utils/request";
import './order.scss'

type PageStateProps = {
  location: CityLocation
}
type PageDispatchProps = {}
type PageOwnProps = {}
type PageState = {
  orderList: []
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Order {
  props: IProps
}

class Order extends Component {
  state: PageState = {
    orderList: []
  }

  async componentDidMount() {
    this.setState({orderList: await this.getData()})
  }

  async componentDidShow() {
    vcmonitor(this)
    Taro.setNavigationBarTitle({title: '缴费记录'})
  }

  async getData() {
    return await newHttp.catchGet(VIP_LOG)
  }

  getName(snapshoot){
    if(!snapshoot) {
      return ''
    }
    return JSON.parse(snapshoot).name
  }

  render() {
    const {
      orderList
    } = this.state
    return (
      <View className='order-warp-list-root-member'>
        <View>
          {orderList && orderList.map((item: any) => <View key={item.id} className='order-item'>
            <View className='order-info'>
              <View className='name-box'>
                <View className='name'>{this.getName(item.vip_snapshoot)}</View>
                <View className='date'>{item.add_date}</View>
              </View>
            </View>
            <View className='total'>
              <View className='price'><Text className='symbol'>￥</Text><View className='view-inline'>{item.total_fee}</View></View>
            </View>
          </View>)}
        </View>
        <View style='height: 10px' />
        {orderList.length <= 0 && <View className='orderNull'>
          <Image src={`${RESOURCE_URL}/resources/images/shopnull.png`} mode='widthFix' />
          <View className='text'>暂无缴费信息</View>
        </View>}
      </View>
    )
  }
}

export default Order as ComponentClass<PageOwnProps, PageState>
